<template>
  <div id="app">
    <FromItemComponents
      :formItemLists="lists"
    >
    </FromItemComponents>
  </div>
</template>

<script>

import FromItemComponents from './components/FromItemComponents'
export default {
  name: 'app',
  components: {
    FromItemComponents
  },
  computed: {

  },
  watch:{

  },
  data () {
    return {
      lists:[
        {
          row:1,
          col:1,
          //item 类型
          type:"input",//必填!
          //label名称
          title:"商品名称",//必填!
          //字段名称
          field:"goods_name",//必填!
          //input值
          value:0,
          validate:  // 校验规则  默认onchage
            {
              // 动态计算key
              dynamicforcompute: {
                // 逻辑运算key
                refcolumns: ['is_postage','cate_id'],
                // 被计算字段（目标）
                computecolumn: 'goods_name',
                // 中间函数
                express: 'is_postage + cate_id'
              },
              // 提示信息
              tip: '',
              // 触发方法
              trigger: ''
            }


        },
        {
          row:1,
          col:1,
          //item 类型
          type:"input",//必填!
          //label名称
          title:"是否包邮",//必填!
          //字段名称
          field:"is_postage",//必填!
          //input值
          value:2,
          props: {
          },
          // 校验规则  默认onchage
          validate: [
          ]
        },
        {
          row:1,
          col:1,
          //item 类型
          type:"input",//必填!
          //label名称
          title:"产品分类",//必填!
          //字段名称
          field:"cate_id",//必填!
          //input值
          value:4,
          props: {

          },
          validate: [ // 校验规则  默认onchage
          ]
        },
        {
          row:1,
          col:1,
          //item 类型
          type:"input",//必填!
          //label名称
          title:"产品name",//必填!
          //字段名称
          field:"cate_name",//必填!
          //input值
          value:12,
          props: {

          },
          validate:  {
            // 动态计算key
            dynamicforcompute: {
              // 逻辑运算key
              refcolumns: ['is_postage'],
              // 被计算字段（目标）
              computecolumn: 'cate_name',
              // 中间函数
              express: 'Math.floor(is_postage/2)'
            },
            // 提示信息
            tip: '',
            // 触发方法
            trigger: ''
          }
        },
        {
          row:1,
          col:1,
          //item 类型
          type:"input",//必填!
          //label名称
          title:"产品分类",//必填!
          //字段名称
          field:"cate_5",//必填!
          //input值
          value:30,
          props: {

          },
          validate:  {
            // 隐藏字段
            hidecolumn: {
              // 逻辑运算key
              refcolumn: ['cate_name'],
              // 隐藏条件 value值
              refval: '2'
            }
          }
        }
      ]
    }
  },
  created () {
    //创建配置文件的个数,随机数(0~10)
    // let listLength = Math.floor(Math.random()*20+10)
    // let listArray = Array(listLength).fill(null)
    // this.lists = listArray.reduce((list) => {
    //   list.push({
    //     row:Math.floor(Math.random()*2+1),
    //     col:Math.floor(Math.random()*2+1)
    //   })
    //   return list
    // },[])

  },
  mounted () {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}


</style>
